<!--  -->
<template>
  <el-container>
    <el-header height="500">
      <div class="tags">
        <span
          :class="{ active: index === currentIndex }"
          v-for="(item, index) in tags"
          :key="index"
          @click="tagClick(item.name, index)"
          >{{ item.name }}</span
        >
      </div>
    </el-header>
    <el-main v-loading="isLoading" element-loading-text="加载中...">
      <div class="content">
        <div
          v-for="(item, index) in musicList"
          :key="index"
          style="position: relative"
          class="image"
        >
          <div class="image_wrap">
            <el-image @click="ToDetail(item.id)" :src="item.coverImgUrl">
            </el-image>

            <div class="play_img" @click="ToDetail(item.id)">
              <img
                src="@/assets/image/play.svg"
                alt=""
                style="
                  width: 50px;
                  height: 50px;
                  background: #aca8a1;
                  border-radius: 100%;
                  opacity: 0.8;
                "
              />
            </div>
          </div>
          <div
            style="
              color: white;
              position: absolute;
              top: 5%;
              right: 7%;
              text-shadow: 0px 0px 2px #000000;
            "
          >
            <i class="el-icon-headset"></i>
            {{
              item.playCount >= 10000
                ? (item.playCount / 10000).toFixed(0) + "万"
                : item.playCount
            }}
          </div>

          <span class="name">{{ item.name }}</span>
        </div>
      </div>
    </el-main>
  </el-container>
</template>

<script>
import { mapGetters } from "vuex";
import { getGoodMusicList } from "util/findMusic.js";
import { getTags } from "util/video.js";
export default {
  name: "",
  data() {
    return {
      tags: [],
      currentIndex: 0,
      musicList: [],
      tag: "华语",
      name: "",
      coverImgUrl: "",
    };
  },
  computed: {
    ...mapGetters("musicPlay", [
      // 加载状态
      "isLoading",
    ]),
  },
  created() {
    this.getTags();
    this.getGoodMusicList();

    //点击标签切换信息
  },
  methods: {
    async getTags() {
      //获取标签
      let res = await getTags();
      // console.log(res);
      this.tags = res.data.tags;
      //获取歌单信息
    },
    async getGoodMusicList() {
      this.$store.dispatch("musicPlay/changeIsLoading", true);
      let { data } = await getGoodMusicList(this.tag);
      this.musicList = data.playlists;
      this.name = this.musicList[0].name;
      this.coverImgUrl = this.musicList[0].coverImgUrl;
      this.$store.dispatch("musicPlay/changeIsLoading", false);

      //   console.log(data);
    },

    tagClick(tag, index) {
      this.tag = tag;
      this.currentIndex = index;
      this.getGoodMusicList(this.tag);
    },

    ToDetail(id) {
      this.$router.push("/songListPage/" + id);
    },
  },
};
</script>

<style lang='less' scoped>
[class*="el-col-"] {
  display: inline-block;
  float: none;
}
.el-header {
  background-color: #fff;
  margin: 0 auto;
  padding: 10px 5.75rem;
  // width: 84%;
  /* background: #ddd; */
  margin-top: 10px;
  border-radius: 15px;
  opacity: 0.8;
  .tags {
    margin-top: 30px;
    cursor: pointer;
    display: flex;
    flex-wrap: wrap;
    // justify-content: space-around;
    span {
      background-color: #fff;
      padding: 3px 15px;
      border-radius: 10px;
      font-size: 18px;
      font-weight: 600;
      line-height: 2;
      margin-bottom: 20px;
      color: rgb(117, 110, 110);
    }
    span:hover {
      background-color: #ddd;
      color: rgb(42, 10, 68);
    }
    span.active {
      color: rgb(76, 15, 173);
    }
  }
}

.el-main {
  padding: 0px 5.75rem;
  margin-top: 10px;
  /* margin-bottom: 30px; */

  .content {
    // display: flex;
    // flex-wrap: wrap;
    display: grid;
    justify-content: space-around;
    grid-template-columns: repeat(auto-fill,220px);

    .image {
      margin-bottom: 25px;
      .image_wrap {
        position: relative;
        .el-image {
          border-radius: 10px;
        }
        .play_img {
          position: absolute;
          top: 50%;
          left: 50%;
          margin-left: -25px;
          margin-top: -25px;
          display: none;
          transition: all 1s;
        }
      }
    }
    .image:hover .play_img {
      display: block;
    }
    .name {
      display: block;
      width: 200px;
      font-size: 16px;
      font-weight: 500;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
  }
}
</style>